<template>
  <div class="box p10">
    <div class="bg-white p10">
      <el-row :gutter="24">
        <el-col :span="18">
          <div class="mb10 level">
            <div class="left">
              <el-input type="text" size="small" placeholder="角色名称"></el-input>
            </div>
            <div class="left ml10">
              <el-button type="primary" size="small" icon="el-icon-search">搜索</el-button>
            </div>
            <div class="right">
              <el-button type="primary" size="small">新增</el-button>
              <el-button type="danger" size="small">禁用</el-button>
              <el-button type="danger" size="small">重置密码</el-button>
            </div>
          </div>
          <el-table
              :data="roles"
              border
              size="small"
              style="width: 100%">
            <el-table-column
                prop="title"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400">
          </el-pagination>
        </el-col>
        <el-col :span="6">
          <div class="ptb10">
            菜单列表
          </div>
          <el-tree :data="data" :props="defaultProps" show-checkbox></el-tree>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "SysRole",
  setup(){
    return {
      currentPage4: 4,
      data: [
        {id:-1,label:"展示台",icon:'el-icon-s-platform',path:'/'},
        {id:0,label:"监控中心",icon:'el-icon-s-cooperation',children:[
            {id:130,label:"实时发布",icon:'el-icon-s-platform',path:'/sys/user'},
            {id:130,label:"大屏展示",icon:'el-icon-s-platform',path:'#1'}
          ]
        },
        {id:1,label:"系统管理",icon:'el-icon-message',path:'aaa',children:[
            {id:110,label:"用户管理",icon:'el-icon-s-platform',path:'/sys/user'},
            {id:110,label:"菜单管理",icon:'el-icon-s-platform',path:'/sys/menu'},
            {id:110,label:"机构管理",icon:'el-icon-s-platform',path:'/sys/org'},
            {id:110,label:"角色管理",icon:'el-icon-s-platform',path:'/sys/role'},
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      roles:Array(2).fill({id:1,roleName:'超级管理员',dataLevel:'全部',email:'1605009393@qq.com',createTime:'2021-06-27',address:'北京市通州区马驹桥镇香雪兰溪'})
    };
  }
}
</script>

<style scoped>

</style>
